define(['pAjax'],()=>{
   class Details{
       constructor(){
        // 获取元素
        this.details =document.querySelector('.details')
        this.right=document.querySelector('main>.right')
        this.left =document.querySelector('main>.left')
        this.pic=document.querySelector('.pic')
        this.ul=document.querySelector('.ul1')
        this.Box=document.querySelector('.Box')
        this.aList=document.querySelectorAll('.ul1>li>img')
        this.aSmallBox=document.querySelector('.pic>img')
        // console.log(this.details,this.right,this.left)
        // console.log(this.pic,this.Box,this.ul,this.aList)
        this.init()
       }
       init(){
           this.request()
        //    this.render()

       }
    //字符串转对象
    getQueryStr(id){
        let str =location.search.slice(1)
        let arr =str.split('&')
        let obj ={}
        arr.forEach(item=>{
            let newArr=item.split('=')
            obj[newArr[0]] = newArr[1]
        })
        return obj[id]
    }
    request(){
        let id =this.getQueryStr('id') - 0
        if(!id){
            location.href ='../html/shoppingCart.html'
            return false
        }else{
            pAjax({url:'../data/goods.json'})
            .then(res=>{
                let data=JSON.parse(res)
                data =data.slice(0,60)
                console.log(data)
                this.render(id ,data)
            })
        }
    }
    render(id,data){
        let res=data.find(item=>{return item.goods_id == id})
        console.log(res)
        this.details.innerHTML=res.goods_introduce
        this.pic.innerHTML=`
                    <img src="${res.img_big_logo}" alt="">
                    <span class="mask"></span>
                    `
        this.ul.innerHTML=`
                    <li><img src="${res.img_small_logo}" alt=""></li>
                    <li><img src="${res.img_small_logo}" alt=""></li>
                    <li><img src="${res.img_small_logo}" alt=""></li>
                    <li><img src="${res.img_small_logo}" alt=""></li>
                    <li><img src="${res.img_small_logo}" alt=""></li>  
              `
              this.Box.innerHTML=`
              <img src="${res.img_big_logo}" alt="">
              `
        
        this.right.innerHTML=`
        <p>${res.title}</p>
        <p>产品编号:</p>
        <span class="bian">132r4t456655</span>
        <div class="price">
            <div class="up">
                <span>价格</span>
                <span>￥</span>
                <span>${res.price}</span>
            </div>
            <div class="down">
             <span>本店活动</span>
             <span>满一件,包邮</span>
            </div>
        </div>
        <div class="size">
           <span>尺码</span>
           <ul>
               <li>XS</li>
               <li>S</li>
               <li>M</li>
               <li>L</li>
               <li>XL</li>
           </ul>
        </div>
        <div class="count">
            <span class="cart">数量</span>
            <div class="calCont">
                <div class="buy">1</div>
                <div class="nCart">
                    <span class="jia">+</span>
                    <span class="jian">-</span>
                </div>
            </div>
            <div class="alive">
                <span>库存:</span>
                <span>${res.goods_number}</span>
                <span>件</span>
            </div>
        </div>
        <div class="button">
            <div class="btu1"><a href="../html/cart.html">加入购物车</a></div>
            <div class="btu2"><a href="">立即购买</a></div>
        </div>
        `

        this.mask=document.querySelector('.mask')
        this.aPic=document.querySelector('.Box>img')
        // this.jia=document.querySelector('.jia')
        // console.log(this.jia)
            //鼠标移入pic让大盒子和遮罩层显示出来
             this.pic.onmouseover =()=>{
                //  console.log(this.mask);
            this.mask.style.display = 'block'
            this.Box.style.display = 'block'
            // alert('123')
         }
        //  console.log(this.mask);
     // 鼠标移出pic让大盒子和遮罩层隐藏起来
         this.pic.onmouseout =()=>{
            //  console.log(this.mask);
        this.mask.style.display = 'none'
        this.Box.style.display = 'none'
     }
         //当鼠标移动pic里面面时让遮罩层进行移动，要求光标始终在遮罩层中间区域
         this.pic.onmousemove =(e)=>{
             e = e || window.event
             // 获取光标的位置
             let x = e.pageX - this.pic.offsetParent.offsetLeft - this.mask.offsetWidth/2-130
             let y = e.pageY - this.pic.offsetParent.offsetTop - this.mask.offsetHeight/2-20
        //      // 边界值判断
             if(x<=0){
                 x=0
             }else if(x>=this.pic.offsetWidth - this.mask.offsetWidth){
                 x=this.pic.offsetWidth - this.mask.offsetWidth
             }
             if(y<=0){
                 y=0
             }else if(y>=this.pic.offsetHeight - this.mask.offsetHeight){
                 y=this.pic.offsetHeight - this.mask.offsetHeight
             }
        //      // 进行赋值
             this.mask.style.left = x +'px'
             this.mask.style.top = y +'px'
        //        //计算比例
             let w = x / (this.pic.offsetWidth - this.mask.offsetWidth)
             let h = y / (this.pic.offsetHeight - this.mask.offsetHeight)
        // //       //给大图进行赋值操作
            this.aPic.style.left = -w *(this.aPic.offsetWidth - this.Box.offsetWidth) +'px'
             this.aPic.style.top = -h *(this.aPic.offsetHeight - this.Box.offsetHeight) +'px'
 
         }
        
         
    }

   }
   return{
    Details: new Details 
   } 

})